<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id='app'>
			<shitian v-for="item in items" v-bind:zhong="item"></shitian>
		</div>
		
		<script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script>
		<script>
			Vue.component("shitian",{
				props: ['zhong'],
				template: '<li>{{zhong}}</li>'
			});
			var vm = new Vue({
				el: "#app",
				data:{
					items: ["一枪","二弓","三斧"]
				}
			});
		</script>
	
		
		<!--
		<div id='app'>
			
		<!--传递给组件中的值：props-->
		<rin v-for="item in items" v-bind:rin="item"></rin>
		</div>
		
		<script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script>
		<script>
			<!--定义一个vue组件component-->
			Vue.component("rin",{
				props: ['rin'],
				template: '<li>{{rin}}</li>'
			});
			var vm = new Vue({
				el: "#app",
				data:{
					items: ["Java","JS","Vue"]
				}
			});
		</script> 
		
		 
	</body>
</html>
